'use client';

import React, { useState } from 'react';
import PromptGenerator from './PromptGenerator';

/**
 * PromptGenerator 组件使用示例
 * 展示如何在页面中集成和使用 AI 提示词生成组件
 */
const PromptGeneratorExample: React.FC = () => {
  const [positivePrompt, setPositivePrompt] = useState('');
  const [negativePrompt, setNegativePrompt] = useState('');
  const [insertHistory, setInsertHistory] = useState<Array<{positive: string, negative: string, timestamp: Date}>>([]);

  // 处理提示词插入
  const handlePromptInsert = (positive: string, negative: string) => {
    setPositivePrompt(positive);
    setNegativePrompt(negative);
    
    // 记录插入历史
    setInsertHistory(prev => [
      { positive, negative, timestamp: new Date() },
      ...prev.slice(0, 4) // 只保留最近5条记录
    ]);
    
    // 可以在这里添加其他逻辑，比如:
    // - 自动填充到表单字段
    // - 触发其他组件更新
    // - 保存到本地存储
    console.log('提示词已插入:', { positive, negative });
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>AI 提示词生成器使用示例</h1>
      
      {/* 组件使用示例 */}
      <div style={{ marginBottom: '30px' }}>
        <h2>基础使用</h2>
        <p>点击下面的按钮体验 AI 提示词生成功能：</p>
        <PromptGenerator 
          onInsert={handlePromptInsert}
          placeholder="描述您想要生成的图像，例如：一只可爱的小猫在花园里玩耍"
          buttonText="生成 SD 提示词"
        />
      </div>

      {/* 显示当前提示词 */}
      <div style={{ marginBottom: '30px' }}>
        <h2>当前提示词</h2>
        <div style={{ display: 'grid', gap: '15px' }}>
          <div>
            <label style={{ display: 'block', fontWeight: 'bold', marginBottom: '5px' }}>
              正向提示词 (Positive Prompt):
            </label>
            <textarea
              value={positivePrompt}
              onChange={(e) => setPositivePrompt(e.target.value)}
              style={{
                width: '100%',
                minHeight: '80px',
                padding: '10px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontFamily: 'monospace',
                fontSize: '13px'
              }}
              placeholder="正向提示词将显示在这里..."
            />
          </div>
          
          <div>
            <label style={{ display: 'block', fontWeight: 'bold', marginBottom: '5px' }}>
              反向提示词 (Negative Prompt):
            </label>
            <textarea
              value={negativePrompt}
              onChange={(e) => setNegativePrompt(e.target.value)}
              style={{
                width: '100%',
                minHeight: '60px',
                padding: '10px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontFamily: 'monospace',
                fontSize: '13px'
              }}
              placeholder="反向提示词将显示在这里..."
            />
          </div>
        </div>
      </div>

      {/* 插入历史 */}
      {insertHistory.length > 0 && (
        <div>
          <h2>插入历史</h2>
          <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
            {insertHistory.map((item, index) => (
              <div 
                key={index}
                style={{
                  padding: '10px',
                  margin: '10px 0',
                  border: '1px solid #eee',
                  borderRadius: '4px',
                  backgroundColor: '#f9f9f9'
                }}
              >
                <div style={{ fontSize: '12px', color: '#666', marginBottom: '5px' }}>
                  {item.timestamp.toLocaleString()}
                </div>
                <div style={{ fontSize: '13px', marginBottom: '5px' }}>
                  <strong>正向:</strong> {item.positive.substring(0, 100)}{item.positive.length > 100 ? '...' : ''}
                </div>
                <div style={{ fontSize: '13px' }}>
                  <strong>反向:</strong> {item.negative.substring(0, 100)}{item.negative.length > 100 ? '...' : ''}
                </div>
                <button
                  onClick={() => handlePromptInsert(item.positive, item.negative)}
                  style={{
                    marginTop: '5px',
                    padding: '4px 8px',
                    fontSize: '12px',
                    border: '1px solid #ddd',
                    borderRadius: '3px',
                    background: 'white',
                    cursor: 'pointer'
                  }}
                >
                  重新使用
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 使用说明 */}
      <div style={{ marginTop: '40px', padding: '20px', backgroundColor: '#f0f8ff', borderRadius: '8px' }}>
        <h2>使用说明</h2>
        <ul style={{ lineHeight: '1.6' }}>
          <li><strong>触发按钮:</strong> 点击 "AI生成提示词" 按钮展开输入界面</li>
          <li><strong>输入描述:</strong> 在文本框中输入自然语言描述，例如 "一只可爱的小猫在花园里玩耍"</li>
          <li><strong>生成提示词:</strong> 点击 "生成 SD 提示词" 按钮，AI 将自动生成英文正向和反向提示词</li>
          <li><strong>编辑提示词:</strong> 生成后可以手动编辑提示词内容</li>
          <li><strong>插入提示词:</strong> 点击 "插入提示词" 按钮将提示词插入到页面的其他组件中</li>
          <li><strong>关闭面板:</strong> 点击右上角的 ✕ 按钮关闭输入面板</li>
        </ul>
      </div>

      {/* 集成示例代码 */}
      <div style={{ marginTop: '30px', padding: '20px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
        <h2>集成代码示例</h2>
        <pre style={{ fontSize: '12px', overflow: 'auto' }}>
{`import PromptGenerator from '@/components/PromptGenerator';

// 在组件中使用
const MyComponent = () => {
  const handlePromptInsert = (positive, negative) => {
    // 处理插入的提示词
    console.log('正向提示词:', positive);
    console.log('反向提示词:', negative);
  };

  return (
    <div>
      <PromptGenerator 
        onInsert={handlePromptInsert}
        placeholder="输入您的描述..."
        buttonText="生成提示词"
      />
    </div>
  );
};`}
        </pre>
      </div>
    </div>
  );
};

export default PromptGeneratorExample;